@leafygreen-ui/tokens

What is @leafygreen-ui/tokens?

@leafygreen-ui/tokens is a design token library provided by MongoDB's LeafyGreen UI team. It offers a set of design tokens that can be used to maintain consistency in design across different components and applications. These tokens include colors, typography, spacing, and other design-related constants.

What are @leafygreen-ui/tokens's main functionalities?

Colors

This feature provides a set of predefined color tokens that can be used to ensure consistent color usage across your application.

import { color } from '@leafygreen-ui/tokens';

const primaryColor = color.green.base;
console.log(primaryColor); // Outputs: '#13AA52'

Typography

This feature offers typography tokens such as font sizes and line heights to maintain consistent text styling.

import { fontSize, lineHeight } from '@leafygreen-ui/tokens';

const headingStyle = {
  fontSize: fontSize.h1,
  lineHeight: lineHeight.h1,
};
console.log(headingStyle); // Outputs: { fontSize: '32px', lineHeight: '40px' }

Spacing

This feature provides spacing tokens that can be used for margins and paddings to ensure consistent spacing throughout your application.

import { spacing } from '@leafygreen-ui/tokens';

const containerStyle = {
  padding: spacing[4],
};
console.log(containerStyle); // Outputs: { padding: '16px' }

Other packages similar to @leafygreen-ui/tokens

styled-system

Styled System provides a set of utilities for building design systems and consistent UI components. It offers a similar approach to design tokens but is more focused on providing utility functions for styling components.

theme-ui

Theme UI is a library for creating themeable user interfaces based on constraint-based design principles. It offers a more comprehensive solution for theming and design tokens, including support for custom themes and responsive design.

tailwindcss

Tailwind CSS is a utility-first CSS framework that provides low-level utility classes for building custom designs. While it doesn't use design tokens in the same way, it offers a similar level of consistency and reusability in design.

README

Tokens

Installation

Yarn

yarn add @leafygreen-ui/tokens

NPM

npm install @leafygreen-ui/tokens

Example

import { spacing, fontFamilies, breakpoints, transitionDuration } from '@leafygreen-ui/tokens';

const spacingExample = () => <span style={{ margin: spacing[1] }}>Hello World</span>;
const fontFamiliesExample = () => <span style={{ font-family: fontFamilies.default }}>Hello World</span>;
const mq = facepaint(
  breakpoints.map(bp => `@media (min-width: ${bp}px)`),
  { literal: true },
);
const transitionDurationExample = <span style={{ transition: transitionDuration.default }}>Hello World</span>;